<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram</title>
</head>
<body>
<canvas id="circuitCanvas" width="450" height="350"></canvas>
<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '18px Arial';

    // Helper function to draw a resistor with a label
    function drawResistor(x, y, width, height, label, labelX, labelY) {
        ctx.strokeRect(x, y, width, height);
        ctx.fillText(label, labelX, labelY);
    }

    // --- Draw the circuit ---

    // 1. Draw the Battery (3 cells in series)
    const battY = 60;
    const longLineHeight = 50;
    const shortLineHeight = 30;
    const startX = 160;

    // Cell 1
    ctx.beginPath();
    ctx.moveTo(startX, battY - longLineHeight / 2);
    ctx.lineTo(startX, battY + longLineHeight / 2);
    ctx.moveTo(startX + 10, battY - shortLineHeight / 2);
    ctx.lineTo(startX + 10, battY + shortLineHeight / 2);
    
    // Cell 2
    ctx.moveTo(startX + 30, battY - longLineHeight / 2);
    ctx.lineTo(startX + 30, battY + longLineHeight / 2);
    ctx.moveTo(startX + 40, battY - shortLineHeight / 2);
    ctx.lineTo(startX + 40, battY + shortLineHeight / 2);

    // Cell 3
    ctx.moveTo(startX + 60, battY - longLineHeight / 2);
    ctx.lineTo(startX + 60, battY + longLineHeight / 2);
    ctx.moveTo(startX + 70, battY - shortLineHeight / 2);
    ctx.lineTo(startX + 70, battY + shortLineHeight / 2);
    ctx.stroke();

    // Connectors for cells
    ctx.beginPath();
    ctx.moveTo(startX + 10, battY);
    ctx.lineTo(startX + 30, battY);
    ctx.moveTo(startX + 40, battY);
    ctx.lineTo(startX + 60, battY);
    ctx.stroke();

    // 2. Draw the main wires
    const yMainLine = 225;
    const yTopWire = battY;
    const xLeftWire = 75;
    const xRightWire = 375;
    
    ctx.beginPath();
    // Left wire from battery
    ctx.moveTo(startX, yTopWire);
    ctx.lineTo(xLeftWire, yTopWire);
    ctx.lineTo(xLeftWire, yMainLine);

    // Right wire from battery
    ctx.moveTo(startX + 70, yTopWire);
    ctx.lineTo(xRightWire, yTopWire);
    ctx.stroke();

    // 3. Draw the series resistor (55 Ohm)
    const resistorWidth = 60;
    const resistorHeight = 20;
    const r55_x = 120;
    const r55_y = yMainLine - resistorHeight / 2;
    
    // Wire to 55 Ohm resistor
    ctx.beginPath();
    ctx.moveTo(xLeftWire, yMainLine);
    ctx.lineTo(r55_x, yMainLine);
    ctx.stroke();
    
    // Draw 55 Ohm resistor and its label
    ctx.textAlign = "center";
    drawResistor(r55_x, r55_y, resistorWidth, resistorHeight, '55 Ω', r55_x + resistorWidth / 2, r55_y - 8);

    // 4. Draw the parallel section
    const junc1_x = r55_x + resistorWidth + 20; // 120 + 60 + 20 = 200
    const junc2_x = junc1_x + 120; // 200 + 120 = 320
    const yTopBranch = 170;
    const yBottomBranch = 280;
    const parallelResX = junc1_x + 20;

    // Wire from 55 Ohm to first junction
    ctx.beginPath();
    ctx.moveTo(r55_x + resistorWidth, yMainLine);
    ctx.lineTo(junc1_x, yMainLine);
    ctx.stroke();
    
    // Wires for parallel branches
    ctx.beginPath();
    // Top branch path
    ctx.moveTo(junc1_x, yMainLine);
    ctx.lineTo(junc1_x, yTopBranch);
    ctx.lineTo(parallelResX, yTopBranch);
    ctx.moveTo(parallelResX + resistorWidth, yTopBranch);
    ctx.lineTo(junc2_x, yTopBranch);
    ctx.lineTo(junc2_x, yMainLine);
    // Bottom branch path
    ctx.moveTo(junc1_x, yMainLine);
    ctx.lineTo(junc1_x, yBottomBranch);
    ctx.lineTo(parallelResX, yBottomBranch);
    ctx.moveTo(parallelResX + resistorWidth, yBottomBranch);
    ctx.lineTo(junc2_x, yBottomBranch);
    ctx.lineTo(junc2_x, yMainLine);
    ctx.stroke();

    // Draw junction dots
    ctx.beginPath();
    ctx.arc(junc1_x, yMainLine, 3, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(junc2_x, yMainLine, 3, 0, 2 * Math.PI);
    ctx.fill();

    // Draw parallel resistors
    // 60 Ohm resistor (top)
    drawResistor(parallelResX, yTopBranch - resistorHeight / 2, resistorWidth, resistorHeight, '60 Ω', parallelResX + resistorWidth / 2, yTopBranch - 18);
    // 30 Ohm resistor (bottom)
    drawResistor(parallelResX, yBottomBranch - resistorHeight / 2, resistorWidth, resistorHeight, '30 Ω', parallelResX + resistorWidth / 2, yBottomBranch + 25);
    
    // Complete the main circuit loop on the right side
    ctx.beginPath();
    ctx.moveTo(junc2_x, yMainLine);
    ctx.lineTo(xRightWire, yMainLine);
    ctx.lineTo(xRightWire, yTopWire);
    ctx.stroke();

    // 5. Add the Figure label
    ctx.font = '16px Arial';
    ctx.fillText('Fig. 9.1', canvas.width / 2, 340);

</script>
</body>
</html>